import RoutesList from './routes-list.mdx';

You can use `useAuthenticator` composable to access `route` string that represents the current `authState`. They can be one of:

<RoutesList />

```html{1,5-7}
<script setup>
  import { Authenticator, useAuthenticator } from '@aws-amplify/ui-vue';
  const auth = useAuthenticator();
</script>

<template>
  <authenticator></authenticator>
  <template v-if="auth.route === 'authenticated'">
    <button @click="auth.signOut">Sign out</button>
  </template>
</template>
```

### Authentication Check

If you just need to check if you're authenticated or not, you can use the more straightforward `useAuthenticator` composable to access the `authStatus` string. The `authStatus` string can represent the following states:

- `configuring`
- `authenticated`
- `unauthenticated`

> The `configuring` state only occurs when the `Authenticator` is first loading.

```html{1,5-7}
<script setup>
  import { Authenticator, useAuthenticator } from '@aws-amplify/ui-vue';
  const auth = useAuthenticator();
</script>

<template>
  <authenticator></authenticator>
  <template v-if="auth.authStatus === 'configuring'">
    <button @click="auth.signOut">Loading...</button>
  </template>
  <template v-if="auth.authStatus === 'authenticated'">
    <button @click="auth.signOut">Sign out</button>
  </template>
</template>
```
